<template>
    <a-select v-model:value="props.modelValue" allowClear @change="handleChange" placeholder="请选择组件">
        <a-select-option v-for="item in moduleOptions" :key="item.value" :value="item.value">
            {{ item.label }}
        </a-select-option>
    </a-select>
</template>

<script setup lang="ts">
import { filteredModules } from '@/utils/router'

const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()
const moduleOptions = computed(() => {
    const rawModules = filteredModules();
    console.log(rawModules)
    return Object.entries(rawModules).map(([key]) => ({
        label: key,
        value: key
    }));
});

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

const handleChange = (value: string) => {
    emits('update:modelValue', value)
}
</script>
